<%--
  @author Duminda Dharmakeerthi
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
    $(function () {
        $('#nominatedSuccessor').hide();
    });

    $(function() {
        var holderPersonHtml = $('#holderPerson').html();
        var holderInstituteHtml = $('#holderInstitute').html();

        $('#clientType1').attr('checked', true);

        $('#clientType0').bind('click', function() {
            $('#holderPerson').html(' ');
            $('#holderInstitute').html(holderInstituteHtml);
        });
        $('#clientType1').bind('click', function() {
            $('#holderInstitute').html(' ');
            $('#holderPerson').html(holderPersonHtml);
        });
        if ($('#clientType0').is(':checked')) {
            $('#holderPerson').html(' ');
            $('#holderInstitute').html(holderInstituteHtml);
        } else if ($('#clientType1').is(':checked')) {
            $('#holderInstitute').html(' ');
            $('#holderPerson').html(holderPersonHtml);
        }
    });
</script>
<table class="width-100">
    <s:include value="../landDetails.jsp"/>
</table>
<div id="tabs">
<ul>
    <li><s:a href="#long-term-lease-details"><s:label
            value="%{getText('long_term_lease_details.label')}"/></s:a></li>
    <li><s:a href="#mortgage-details"><s:label value="%{getText('mortgage_details.label')}"/></s:a></li>
    <li><s:a href="#personal-details"><s:label value="%{getText('holder_details.label')}"/></s:a></li>
    <li><s:a href="#occupier-details"><s:label value="%{getText('occupier_details.label')}"/></s:a></li>
</ul>
<div id="long-term-lease-details">
    <table class="width-100">
        <tr>
            <td><s:label value="%{getText('lease_no.label')}"/><span class="mandatory-field"></span></td>
            <td><s:textfield id="referenceNo" name="alienation.referenceNo"
                             cssClass="width-200-px"/></td>
            <td><s:label value="%{getText('date_of_approved.label')}"/> <s:label
                    value="%{getText('date_format.label')}" cssClass="date-format"/><span
                    class="mandatory-field"></span></td>
            <td><s:textfield id="issueDate" name="alienation.issueDate"
                             onclick="selectDate('issueDate')" cssClass="width-200-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('folio_no.label')}"/></td>
            <td><s:textfield id="folioNo" name="alienation.folioNumber" cssClass="width-200-px"/></td>
            <td><s:label value="%{getText('folio_date.label')}"/> <s:label value="%{getText('date_format.label')}"
                                                                           cssClass="date-format"/></td>
            <td><s:textfield id="folioDate" name="alienation.folioDate"
                             onclick="selectDate('folioDate')" cssClass="width-200-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('folio_location.label')}"/></td>
            <td colspan="3"><s:textarea id="folioLocation" name="alienation.folioLocation" rows="1"
                                        cssClass="width-595-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('lease_period.label')}"/><span class="mandatory-field"></span></td>
            <td><s:textfield id="leasePeriod" name="alienation.leaseDetail.leasePeriod"
                             cssClass="width-200-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('lease_diagram_no.label')}"/><span class="mandatory-field"></span></td>
            <td colspan="3"><s:textfield id="lease-diagram-no" cssClass="width-200-px"
                                         name="alienation.leaseDetail.leaseDiagramNo"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('purpose_of_lease.label')}"/></td>
            <td colspan="3"><s:select id="permittedLandUsageId" name="alienation.permittedUsage.id"
                                      list="landUsageList" cssClass="width-200-px"
                                      headerKey="0"
                                      headerValue="%{getText('select.label')}"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('present_usage.label')}"/></td>
            <td colspan="3"><s:select id="currentLandUsageId" name="alienation.currentLandUsage.id"
                                      list="landUsageList" headerKey="0" cssClass="width-200-px"
                                      headerValue="%{getText('select.label')}"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('valuation_of_land.label')}"/></td>
            <td><s:label value="%{getText('developed_value.label')}"/></td>
            <td colspan="2"><s:textfield id="developed-value" cssClass="width-200-px"
                                         name="alienation.leaseDetail.developedValue"/></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td><s:label value="%{getText('commercial_value.label')}"/></td>
            <td colspan="2"><s:textfield id="commercial-value" cssClass="width-200-px"
                                         name="alienation.leaseDetail.commercialValue"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('undeveloped_value.label')}"/></td>
            <td colspan="2"><s:textfield id="undeveloped-value" cssClass="width-200-px"
                                         name="alienation.leaseDetail.unDevelopedValue"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('lease_arrears.label')}"/></td>
            <td colspan="3">
                <s:label value="%{getText('from_year.label')}"/>
                <s:textfield id="leaseArrearsFromYear" name="alienation.leaseDetail.leaseArrearsFromYear"
                             cssStyle="width: 80px;"/>
                <s:label value="%{getText('to_year.label')}"/>
                <s:textfield id="leaseArrearsToYear" name="alienation.leaseDetail.leaseArrearsToYear"
                             cssStyle="width: 80px;"/>
            </td>
        </tr>
        <tr>
            <td><s:label value="%{getText('lease_revised.label')}"/> ?</td>
            <td><s:label value="%{getText('yes.label')}"/> <input type="radio" name="amend"
                                                                  checked="checked"
                                                                  value="1" id="ammendYes"
                                                                  onclick="showAmend()"/> <s:label
                    value="%{getText('no.label')}"/> <input type="radio" name="amend" value="0"
                                                            id="ammendNo"
                                                            onclick="hideAmend()"/>
            </td>
            <td><s:label cssClass="amend" value="%{getText('rivision_interval.label')}"/></td>
            <td><s:textfield cssClass="amend width-200-px" id="amend-period"
                             name="alienation.leaseDetail.leaseAmendPeriod"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('comment_about_alienation.label')}"/></td>
            <td colspan="3"><s:textarea id="alienationComment" name="alienation.alienationComment"
                                        rows="1"
                                        cssClass="width-595-px"/></td>
        </tr>
    </table>
</div>
<div id="mortgage-details">
    <table class="width-100">
        <tr>
            <td><s:label value="%{getText('name_of_bank_institute.label')}"/></td>
            <td colspan="3"><s:textarea id="nameOfBank" name="alienation.mortgage.nameOfBank" rows="1"
                                        cssClass="width-595-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('address_of_bank_institute.label')}"/></td>
            <td colspan="3"><s:textarea id="addressOfBank" name="alienation.mortgage.addressOfBank"
                                        rows="1"
                                        cssClass="width-595-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('mortgage_date.label')}"/> <s:label
                    value="%{getText('date_format.label')}" cssClass="date-format"/></td>
            <td colspan="3"><s:textfield id="startedDate" name="alienation.mortgage.startedDate"
                                         onclick="selectDate('startedDate')" cssClass="width-200-px"
                                         onKeyPress="return dateNumbersOnly(event,true)"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('mortgage_period.label')}"/></td>
            <td><s:label value="%{getText('years.label')}"/> <s:textfield id="mortgagePeriodInYears"
                                                                          name="alienation.mortgage.mortgagePeriodInYears"
                                                                          cssStyle="width: 80px;"
                                                                          onKeyPress="return numbersonly(event,true)"/></td>
            <td><s:label value="%{getText('months.label')}"/> <s:textfield id="mortgagePeriodInMonths"
                                                                           name="alienation.mortgage.mortgagePeriodInMonths"
                                                                           cssStyle="width: 80px;"
                                                                           onKeyPress="return numbersonly(event,true)"/></td>
            <td></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('mortgage_conditions.label')}"/></td>
            <td colspan="3"><s:textarea id="conditions" name="alienation.mortgage.conditions" rows="1"
                                        cssClass="width-595-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('power_of_attorney.label')}"/></td>
            <td colspan="3"><s:textarea id="powerOfAttorney" name="alienation.mortgage.powerOfAttorney"
                                        rows="1"
                                        cssClass="width-595-px"/></td>
        </tr>
    </table>
</div>
<div id="personal-details">
    <table class="width-100">
        <tr>
            <td align="center" colspan="4">
                <s:radio id="clientType" name="alienation.holder.holderType"
                         list="#@java.util.HashMap@{'1':getText('person.label'),'0':getText('institute.label')}"/>
            </td>
        </tr>
    </table>
    <table id="holderInstitute" class="width-100">
        <tr>
            <td><s:label value="%{getText('name_of_institute.label')}"/><span class="mandatory-field"></span></td>
            <td colspan="3"><s:textarea id="name" name="alienation.holder.name" cssClass="width-595-px"
                                        rows="1"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('address.label')}"/></td>
            <td colspan="3"><s:textarea id="address" name="alienation.holder.contacts.address"
                                        cssClass="width-595-px"
                                        rows="1"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('registration_no.label')}"/></td>
            <td colspan="3"><s:textfield id="nic" name="alienation.holder.registrationNumberOrNIC"
                                         cssClass="width-200-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('contact_number.label')}"/></td>
            <td><s:label value="%{getText('mobile.label')}"/></td>
            <td><s:textfield id="mobile" name="alienation.holder.contacts.mobile" cssClass="width-200-px"
                             onKeyPress="return numbersonly(event,true)"/></td>
        </tr>
        <tr>
            <td></td>
            <td><s:label value="%{getText('land_line.label')}"/></td>
            <td><s:textfield id="landPhone" name="alienation.holder.contacts.landPhone"
                             cssClass="width-200-px" onKeyPress="return numbersonly(event,true)"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('email.label')}"/></td>
            <td colspan="3"><s:textfield id="email" name="alienation.holder.contacts.email"
                                         cssClass="width-200-px"/></td>
        </tr>
        <tr>
            <td><s:label value="%{getText('fax.label')}"/></td>
            <td colspan="3"><s:textfield id="fax" name="alienation.holder.contacts.fax"
                                         cssClass="width-200-px" onKeyPress="return numbersonly(event,true)"/></td>
        </tr>
    </table>
    <table id="holderPerson" class="width-100">
        <s:include value="../personalDetails.jsp"/>
    </table>
</div>
<div id="occupier-details">
    <table class="width-100">
        <s:include value="../encroacherDetails.jsp"/>
    </table>
</div>
</div>
